<!--
 * @Description: 重要节点控制策划
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2022-02-16 16:06:21
 * @LastEditTime: 2023-02-15 15:37:12
 * @FilePath: \cscec-pms-admin\src\views\project\projectManagementPlanning\projectManagementPlanningComponents\components\ControlPlanningImportantNodes.vue
-->
<template>
  <a-card>
    <title-name title="重要节点控制策划" />
    <section class="import-wrapper">
      <a-button
        v-if="info.pageType !== 'detail'"
        type="primary"
        class="add"
        @click="handleImport"
      >
        导入节点数据
      </a-button>
      <p>
        项目重要节点内容由《施工进度总计划》中的一、二级节点数据提取，若要修改，直接进入<a @click="handleToConstructionSchedule">施工进度总计划</a>功能修改。
      </p>
    </section>
    <a-table
      ref="table"
      :columns="columns"
      :data-source="data"
      :pagination="false"
      bordered
      row-key="id"
      :scroll="{ y: 300 }"
      :loading="loading"
    >
      <template
        slot="operation"
        slot-scope="text, record,index"
      >
        <a
          v-if="info.pageType !== 'detail'"
          class="delete"
          @click="handleRemove(index)"
        >移除</a>
      </template>
    </a-table>
    <!-- 导入节点 -->
    <ImportImportantNodes
      :visible.sync="importVisible"
      :selected.sync="data"
    />
    <!-- 导入节点 -->
  </a-card>
</template>
<script>
import ImportImportantNodes from './ImportImportantNodes'
import { controlPlanningImportantNodes } from '@/api/projectManagementPlanning/projectManagementPlanningSchedule'
export default {
  name: 'ControlPlanningImportantNodes' + Date.now(),
  components: {
    ImportImportantNodes
  },
  props:{
    baseFormInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      // 表头
      columns: [
        {
          title: '序号',
          width: 80,
          align: 'center',
          customRender: (text, record, index) => {
            return index + 1
          }
        },
        {
          title: '重要节点内容',
          dataIndex: 'businessMatters',
          scopedSlots: { customRender: 'businessMatters' }
        },
        {
          title: '计划开始时间',
          dataIndex: 'planStartTime',
          scopedSlots: { customRender: 'planStartTime' }
        },
        {
          title: '计划结束时间',
          dataIndex: 'planEndTime',
          scopedSlots: { customRender: 'planEndTime' }
        },
        {
          title: '备注',
          dataIndex: 'controlLevelName',
          scopedSlots: { customRender: 'controlLevelName' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: 100,
          scopedSlots: { customRender: 'operation' }
        }
      ],
      // 导入节点显示隐藏
      importVisible: false,
      // 表数据
      data: [],
      //加载
      loading: false
    }
  },
  computed: {
    // 地址携带信息
    info() {
      return this.$route.query
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    /**
     * @description: 获取表数据
     * @param {void}
     * @return {void}
     */
    async getData() {
      this.data = []
      const { id, version } = this.info
      this.loading = true
      const { code, data } = await controlPlanningImportantNodes.queryPlanCriticalNodeControl({
        latestData: version ? false : true,
        planTaskDetailId: id,
        version
      })
      if (code === 200) {
        this.data = data
      } else {
        this.data = []
      }
      this.loading = false
    },
    /**
     * @description: 跳转施工进度总计划
     * @param {void}
     * @return {void}
     */
    handleToConstructionSchedule() {
      controlPlanningImportantNodes.getMasterPlanId(this.baseFormInfo.projectId).then(res=>{
        if(res.code === this.SUCCESS_CODE){
          this.$router.push({
            path: '/construction/constructionSchedule/implementationManagement',
            query: {
              projectId: this.baseFormInfo.projectId,
              status: '2',
              planId: res.data
            }
          })
        }
      })
    },
    /**
     * @description: 导入节点
     * @param {void}
     * @return {void}
     */
    handleImport() {
      this.importVisible = true
    },
    /**
     * @description: 移除
     * @param {number} index 数据索引
     * @return {void}
     */
    handleRemove(index) {
      const vm = this
      this.$confirm({
        title: '温馨提示',
        content: '请确认是否要移除该节点',
        okType: 'danger',
        onOk() {
          vm.data.splice(index, 1)
        }
      })
    },
    /**
     * @description: 保存草稿
     * @param {object} baseInfo 基本信息
     * @return {void}
     */
    ControlPlanningImportantNodesSaveDrafts(baseInfo) {
      this.handleSubmit(1)
    },
    /**
     * @description: 提交
     * @param {object} baseInfo 基本信息
     * @return {void}
     */
    ControlPlanningImportantNodesSubmit(baseInfo) {
      if (this.data.length > 0) {
        const vm = this
        this.$confirm({
          title: '温馨提示',
          content: '请确认是否提交？',
          onOk() {
            vm.handleSubmit(2)
          }
        })
      } else {
        this.$confirm({
          title: '温馨提示',
          content: '请至少填写一行数据'
        })
      }
    },
    /**
     * @description: 数据提交
     * @param {number} statusEnum 状态码
     * @return {void}
     */
    handleSubmit(statusEnum) {
      this.submiting = true
      const { id: planTaskDetailId, version, pageType } = this.info
      controlPlanningImportantNodes
        .batchUpdatePlanCriticalNodeControl({
          changed: pageType === 'change',
          list: this.data,
          planTaskDetailId,
          statusEnum,
          version
        })
        .then(({ code }) => {
          if (code === 200) {
            this.$message.success('操作成功')
            if (statusEnum === 2) {
              this.$close()
            }
          }
        })
        .finally(() => {
          this.submiting = false
        })
    }
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
.import-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  p {
    margin-left: 20px;
    margin-bottom: 0;
  }
}
@{deep} .ant-table-fixed {
  margin-left: 0;
}
.delete {
  color: red;
}
</style>
